<template>
    <div class="wrap">
        <Row>
            <i-col class="wrap-item" :lg="{ span: 7 }" v-for="(item,index) in list" :key="index">
                <div class="wrap-title">
                    <Icon type="ios-color-fill-outline"/>
                    {{item.title}}
                </div>
                <div class="wrap-list">
                    <p v-for="(infoItem,index) in item.info" :key="index">
                        <span class="wrap-list-item">
                            <p>{{infoItem.title}}</p>
                            <p class="wrap-list-time">{{infoItem.time}}</p>
                        </span>
                    </p>
                </div>
            </i-col>
        </Row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [
                {
                    title: '最新签约',
                    icon: 'ss',
                    info: [
                        { title: '好好学习天天向上', time: '2018-2-3' },
                        { title: '好好学习天天向上', time: '2018-2-3' },
                        { title: '好好学习天天向上', time: '2018-2-3' },
                        { title: '好好学习天天向上', time: '2018-2-3' },
                        { title: '好好学习天天向上', time: '2018-2-3' }
                    ]
                },
                {
                    title: '最新签约',
                    icon: 'ss',
                    info: [
                        { title: '好好学习天天向上', time: '2018-2-3' },
                        { title: '好好学习天天向上', time: '2018-2-3' },
                        { title: '好好学习天天向上', time: '2018-2-3' },
                        { title: '好好学习天天向上', time: '2018-2-3' },
                        { title: '好好学习天天向上', time: '2018-2-3' }
                    ]
                },
                {
                    title: '最新签约',
                    icon: 'ss',
                    info: [
                        { title: '好好学习天天向上', time: '2018-2-3' },
                        { title: '好好学习天天向上', time: '2018-2-3' },
                        { title: '好好学习天天向上', time: '2018-2-3' },
                        { title: '好好学习天天向上', time: '2018-2-3' },
                        { title: '好好学习天天向上', time: '2018-2-3' }
                    ]
                }
            ]
        };
    }
};
</script>

<style lang="less" scoped>
.wrap {
    margin-top: 15px;
    padding-bottom: 50px;
}
.wrap-item {
    background: #fff;
    border: 1px solid #ddd;
    margin-right: 4%;
    .wrap-title {
        padding: 10px;
        border-bottom: 1px solid #ddd;
    }
    .wrap-list {
        padding: 10px;
    }
    .wrap-list-item {
        display: flex;
        justify-content: space-between;
        padding: 5px 0;
    }
    .wrap-list-time {
        color: #ccc;
    }
}
</style>
